<template>
  <div class="connect">
    <div class="newlistbox">
      <nav-ber icon="../assets/home.png" :title="title"></nav-ber>
      <div class="trueBox">
        <div class="newlistbox_title">
          <span>{{title_}}</span>
          <div>
            <el-input
                  @keyup.enter.native="selectform"
                :placeholder="$t('public.Please_enter_the_query_content')"
                v-model="search_text">
                <i slot="prefix" class="input_icon el-icon-search"></i>
              </el-input>
          </div>
        </div>
        <div class="list_item" v-for="(item,index) in list " :key="index">
          <!-- <img class="list_item_img" src="../assets/banner_1.png" alt="" /> -->
          <div class="list_item_content">
            <p class="list_item_content_title uni-ellipsis">
                {{item.name}}
              </p>
            <p class="list_item_content_decs uni-ellipsis">
                {{type==3?'' :item.introduce}}
              </p>
              <p class="list_item_content_time">
                 {{item.add_time}}
                </p>
          </div>
          <el-button type="info" class="seeInfo" @click="seeInfo(item.id)">
            {{$t('public.Detail')}}
            <i class="el-icon-right"></i>
          </el-button>
        </div>
        <div style="display: flex; justify-content: flex-end;margin-top: 2vh;" >
          <el-pagination
            :page-size="limit"
            :pager-count="9"
             @current-change="handleCurrentChange"
             layout="prev, pager, next"
            :total="total">
          </el-pagination>
        </div>

      </div>

    </div>
  </div>
</template>

<script>
import navBer from "@/components/nav_ber"
 import headers from "@/components/header"
 import footers from "@/components/footers"
 import {
   agreement,
   comment_list
 } from '@/utils/wqzApi'
export default {
    components:{
      navBer,
    },
    data () {
        return {
          select:'',
          limit:10,
          page:1,
          total:0,
          type:null,
          title:'',
          title_:'',
          search_text:'', //搜索内容
          list:[]
        }
    },
    mounted() {
    var type = this.$getUrlParams().type
      if(type == 'question'){
        this.type = 2
        this.title =  this.$t('public.frequently_asked_question')
        this.title_ = this.$t('public.issues_list')
        this.getList(this.type)
      }
      if(type == 'new'){
        this.type = 1
        this.title =  this.$t('public.Notice')
        this.title_ = this.$t('public.Announcement_List')
        this.getList(this.type)
      }
      if(type == 'ping'){
        this.type = 3
        console.log(this.type)
        this.title =  this.$t('public.testimonials')
        this.title_ = this.$t('public.testimonials_list')
        this.comment_list()
      }
    },
    methods:{
      comment_list(){
        var data = {
          page:this.page,
          limit:this.limit,
          name:this.search_text,
        }
        comment_list(data).then(res=>{
          console.log(res , '返回信息')
          this.list = res.data.list
          this.total =res.data.count
        })
      },
      getList(){
        var type = null
        if(this.type==1){
          type = 3
        }
        if(this.type==2){
          type = 2
        }
        var data = {
          page:this.page,
          limit:this.limit,
          name:this.search_text,
          type:type
        }
        agreement(data).then(res=>{
          if(type == 2){
            // 常见问题
            this.list = res.data.list
            console.log(res , '常见问题')
          }
          if(type == 3){
            // 公告
            this.list = res.data.list
            this.total =res.data.count
            console.log(res , '公告')
          }

        })
      },
      selectform(){
        console.log('查询')
        this.page = 1
        this.getList()
      },
      seeInfo(id){
        this.$router.push({path:'newInfo?id='+id+'&type='+(this.type==1?'new':this.type==2?'question':'ping')})
      },
      handleCurrentChange(e){
        this.page = e
        this.getList()
      }

    }
}
</script>


<style lang="scss" scoped>
  @import url('./style/css/new.css');

</style>
<style scoped>

  .newlistbox_title /deep/ .el-input__inner{   /*或者 .s2>>>.el-input__inner  */
    border-radius: 100px;
    width: 18vw;
    height: 30px;

  }
  .input_icon{
    line-height: 30px;
  }
</style>
